{% extends "layout/public.html" %}

{% block title %}注册{% endblock %}

{% block head %}
<style>
    /*注册区域*/
    .layui-input-block {
        margin-left: 0;
    }
    .register-area {
        width: 266px;
        border-radius: 20px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .register-checkbox {
        text-align: left;
    }
    .register-area .title {
        color: #009688;
        font-weight: bold;
        text-align: center;
        margin-bottom: 15px;
    }
    .about p {
        font-weight: bold;
        color: red;
    }
    .about li{
        list-style: square;
        margin-left: 15px;
    }
    body .layui-layer-title {
        background-color: #fff;
        padding-left: 10px;
    }
</style>
{% endblock %}

{% block content %}
        <div class="register-area">
            <h3 class="title">免费注册</h3>
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="text" name="username" required lay-verify="required|username" lay-verType="tips" placeholder="注册用户名" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="password" name="password" required lay-verify="required|pass" lay-verType="tips" placeholder="设置登录密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="password" required lay-verify="required|repass" lay-verType="tips" placeholder="确认登录密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item register-checkbox">
                    <input type="checkbox" id="agreement" lay-skin="primary" autocomplete="off" class="layui-input" lay-verify="checked" lay-verType="tips">
                    <div style="position: relative; top: 6.5px;left: -9px; display:inline">
                        我同意 <a href="javascript:;" id="terms" style="color: #999;">服务条款</a> 和 <a href="javascript:;" id="privacy" style="color: #999;">隐私政策</a>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="register" id="submitbtn">注册</button>
                    </div>
                </div>
            </form>
        </div>
{% endblock %}

{% block script %}
<script id="terms_show_tpl" type="text/html">
<div style="padding: 10px;">
	<div class="about">
        <p>以下类型的图片均不允许上传:</p>
        <ul>
            <li>侵权的图片, 包括侵犯个人私隐、企业版权等;</li>
            <li>含有成人內容/擦边/偷拍/过分裸露情节的图片及成人性用品相关图片;</li>
            <li>含有恐怖、血腥以及煽动暴力、宣扬宗教、种族主义、种族仇恨等;</li>
            <li>其他非法图片(包括但不限于赌博、毒品、电脑病毒、木马、诈骗、假冒药品等非法行为);</li>
            <li>违反所在国家或地区法律法规的图片;</li>
        </ul>
        <p>其他条款</p>
        <ul>
            <li>请不要多次重复的上传同一文件。</li>
            <li>即使图片不违规, 也禁止外链到非法网站或App应用程序中。</li>
            <li>用户产生的内容（即上传的图片）需自行负责，本站不承担任何法律及连带责任。</li>
            <li>管理员有权删除违规、违法、被举报等不合适的图片。</li>
            <li>不论是网页端注册还是通过接口注册，均视为您已同意服务条款和隐私政策。</li>
            <li>保留随时变更或修改服务条款部分或全部內容的权利。</li>
        </ul>
    </div>
</div>
</script>
<script id="privacy_show_tpl" type="text/html">
<div style="padding: 10px;">
    <div class="about">
        <ul>
            <li>本站使用cookie标记登录状态，用户可以完全管理，如清除。</li>
            <li>本站仅记录注册用户的用户名、注册时间, 这些信息仅供网站内部使用。</li>
            <li>除法律要求或用户违规外, 我们不会主动向第三方泄露您的敏感信息。</li>
            <li>由用户本人造成的账号泄露或黑客攻击、服务器故障等不可抗力造成的服务故障，本站不承担任何责任。</li>
            <li>扩展性或第三方功能造成的隐私泄露本站亦不承担任何责任。</li>
        </ul>
    </div>
</div>
</script>
<script>
    layui.use(['picbed', 'form', 'layer', 'laytpl'], function () {
        var picbed = layui.picbed,
            laytpl = layui.laytpl,
            form = layui.form,
            $ = layui.jquery;
        //表单验证
        form.verify({
            checked: function (value) {
                if (!$("#agreement").is(":checked")) {
                    return "勾选同意服务条款与隐私政策后方能注册！";
                }
            },
            pass: [
                /^[\S]{6,32}$/, '密码要求6-32位，且不能出现空格'
            ],
            repass: function(value) {
                var pwd = $('input[name="password"]').val();
                if(value !== pwd) {
                    return '两次输入的密码不一致!';
                }
            },
            username: picbed.checkUsername,
        });
        //监听提交
        form.on('submit(register)', function (data) {
            picbed.ajax("{{ url_for('api.register') }}", function (res) {
                layer.msg("注册成功，即将跳转登录...", {
                    icon: 1,
                    time: 1000
                }, function () {
                    location.href = "{{ url_for('front.login') }}";
                });
            }, {
                data: data.field,
                beforeSend: function() {
                    $("#submitbtn").attr({disabled: "disabled"});
                    $('#submitbtn').addClass("layui-disabled");
                },
                complete: function() {
                    $('#submitbtn').removeAttr("disabled");
                    $('#submitbtn').removeClass("layui-disabled");
                },
            });
            return false;
        });
        //服务条款与隐私政策
        $("#terms").on("click", function () {
            laytpl(terms_show_tpl.innerHTML).render({}, function (html) {
                layer.open({
                    type: 1,
                    title: '服务条款 Terms of Service',
                    shadeClose: true,
                    shade: 0,
                    area: "auto",
                    content: html
                });
            });
        });
        $("#privacy").on("click", function () {
            laytpl(privacy_show_tpl.innerHTML).render({}, function (html) {
                layer.open({
                    type: 1,
                    title: '隐私政策 Privacy Policy',
                    shadeClose: true,
                    shade: false,
                    area: "auto",
                    content: html
                });
            });
        });
    });
</script>
{% endblock %}